<template>
    <div class="payment page">
        <div class="con">
            <div class="top">
                <div class="total">
                    <span class="name">总收款</span>
                    <span class="amount">¥{{total.all.toFixed(2)}}</span>
                </div>
                <div class="info">
                    <div class="left border-right-1px">
                        <span class="amount">¥{{total.done.toFixed(2)}}</span>
                        <span class="name">已收款</span>
                    </div>
                    <div class="right">
                        <span class="amount">¥{{(total.all-total.done).toFixed(2)}}</span>
                        <span class="name">未收款</span>
                    </div>
                </div>
            </div>

            <div class="items">
                <div class="item border-bottom-1px" :key="index" :class="{done:record.status==1}"
                     v-for="(record,index) in recordList">
                    <div class="icon-con">
                        <span class="iconfont iconmoney"></span>
                    </div>
                    <div class="info" @click="turn(record.info)">
                        <span class="amount">+{{record.amount}}</span>
                        <span class="time">{{parseTime(record.time)}}</span>
                        <span class="see">点击查看明细</span>
                    </div>
                    <div class="btn" @click="confirm(index)">{{record.status==0?'确认收款':'已收款'}}</div>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
    import {paymenet} from "@/api/account";
    import {parseTime} from "../../common/js/time";
    import {confirm} from "../../api/account";

    export default {
        activated() {

            paymenet().then(res => {
                this.records = res.data
            })
        },
        data() {
            return {
                records: []
            }
        },
        computed: {
            recordList () {

                let res = this.records.map(record => {
                    return record.record
                })
               res = res.filter(r=>{
                    if(r.bus ==this.$route.query.type){ // 只显示货款
                        return true
                    }
                    return false
                })
                return res
            },
            total(){
                let done = 0
                let all = 0
                this.recordList.forEach(record=>{
                    if(record.status==1){
                        done+=record.amount
                    }
                    all+=record.amount
                })
                let tem  = {done,all}
                return tem
            }
        },
        methods: {
            turn(orderNo){
                this.$router.push({
                    path:'/order/detail',
                    query:{orderNo}
                })
            },
            showAlert() {
                this.$createDialog({
                    type: 'alter',
                    title: '',
                    content: '补货-还货-收款成功',
                    icon: 'cubeic-ok',
                }).show()
            },
            confirm(index) {
                let record = this.recordList[index]
                if(  record.status ==1){
                    return
                }
                confirm(record.id).then(res=>{
                    this.showAlert()
                    this.$set(this.recordList[index],'status',1)
                    // this.records[index].status = 1
                    // this.recordList.splice(index,1,res.data)
                })
            },
            parseTime(time) {
                return parseTime(time)
            }
        }
    }
</script>

<style scoped lang="stylus">
    .payment
        z-index 2
        .con
            padding 0px 10px 10px
            background url("./earth.png") no-repeat $page-bg
            background-attachment:fixed;
            min-height 100%
            .top
                overflow hidden
                .total
                    display flex
                    flex-direction column
                    align-items center
                    justify-content flex-start
                    margin-top 19px
                    margin-bottom 5px
                    .name
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 300;
                        color:rgba(255,255,255,1);
                    .amount
                        margin 15px 0
                        font-size: 30px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);

                .info
                    display flex
                    height 85px
                    align-items center
                    border-radius 5px
                    background:rgba(255,255,255,0.26);

                    .left
                        border-right 1Px solid #A1A1A1

                    .left, .right
                        flex-direction column
                        height 45px
                        flex 1
                        display flex
                        align-items center
                        justify-content center

                        .amount
                            font-size: 24px;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color:#FFFFFF

                        .name
                            margin-top 8px
                            font-size: 12px;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color:rgba(255,255,255,1);

            .items
                margin-top 10px

                .item
                    margin-top 5px
                    border-radius 5px
                    border-bottom-color #DCDCDC
                    display flex
                    align-items center
                    height 74px
                    background:rgba(255,255,255,1);
                    .icon-con
                        .iconfont
                            font-size 45px
                            flex 0 0 45px
                            margin 0 14px
                            color #F0C808

                    .info
                        height 100%
                        display flex
                        flex 1
                        justify-content center
                        flex-direction column

                        .amount
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color: rgba(247, 137, 94, 1);

                        .time,.see
                            margin-top 7px
                            font-size: 10px;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color: rgba(161, 161, 161, 1);
                        .see
                            color #F7895E
                    .btn
                        font-size: 12px;
                        width 65px
                        height 28px
                        background-color #F7895E
                        color white
                        display flex
                        align-items center
                        justify-content center
                        flex 0 0 65px
                        border-radius 14px
                        margin-right 10px

                    &.done
                        /*background-color #EDECEC*/

                        .btn
                            background-color #F5F4F1
                            color #6F6F6F

                        .amount
                            color #6F6F6F
</style>
